<template>
  <div id="views">
    <ul id="sec2" class="listBox">
      <li v-for="(item , index ) in list" v-if="item.type == 1" :class="item.canUse ? '' : 'canNotUse' ">
        <div>
          <input type="checkbox" :id="'cur'+index" @change="checkChange( $event , item , index )" :checked="item.checked">
          <label :for="'cur'+index" class="top" :disabled="!item.canUse">
            <div class="left floatleft">
              <p class="name">
                <span class="middle">{{item.couponName}}</span>
                <img src="../../common/imgs/expiring_soon.png" alt="图片"  v-if="item.expire == 1 && item.canUse" class="middle expiringSoon">
              </p>
              <p class="endTime">有效期至 {{item.expiryTime}}</p>
            </div>
            <div class="right floatright">
              <p class="money">
                <span class="num">{{item.confMap.CNY.dis}}</span>
                <span class="unit">CNY</span>
              </p>
              <p class="canUse">满{{item.confMap.CNY.cond}}可用</p>
              <p class="canUse2">{{item.confMap.USDT.dis}} USDT,满{{item.confMap.USDT.cond}}可用</p>
            </div>
          </label>
          <img src="../../common/imgs/not_enougn.png" alt="无法使用" class="notCanuse" v-if="!item.canUse">
        </div>
      </li>
    </ul>
    <section class="ab">
      <p class="max">本单最多可抵扣{{maxDeduction}} {{rrmUnit}}</p>
      <div class="confirmUse">
        <span class="isUsed">已选择:{{chose_num}}张,</span>
        <span class="total">可抵扣<span>{{deduction_money}}{{rrmUnit}}</span></span>
        <button class="btn" @click="subUse">确定使用</button>
      </div>
    </section>
    <p class="loadInfo" v-if="showLoading">{{loadInfo}}</p>
    <div class="notCoupon" v-if="notCoupon">
      <p class="img">
        <img src="../../common/imgs/not_coupon.png" alt="无">
      </p>
      <p class="msg">暂无优惠券~</p>
    </div>
    <dia-logtwo ref="refb" title="提示" @confirm="confirm()" confirmBtn="确定使用"/>
  </div>
</template>
<script>
  import { getCouponList } from "../../http/api";
  export default {
    name: 'chose_coupon',
    data() {
      return {
        introduce : '选择优惠券',
        name : '优惠券',
        active : 0 , //选择的优惠券index
        list:[],
        notCoupon : false,
        showLoading : true,
        loadInfo : '加载中...',
        page : 0,
        totalPage : 1,
        rrmUnit : '',
        acceptLoad : true,
        deduction_money : '0',//抵扣金额
        chose_num : '0',//选择优惠券数量
        chose_arr : [],//选择的优惠券组成数组
        orderTotalMoney : 0, //订单总金额
        maxDeduction : '', //最大抵扣金额
      }
    },
    components:{
      DiaLogtwo: resolve => {require(['../../components/dialogTwo'], resolve)},
    },
    mounted(){
      let thiz = this;
      let storeChoseCoupons = thiz.$store.state.chose_coupons;
      thiz.chose_arr = storeChoseCoupons == '[]' ||  storeChoseCoupons.length == 0  ? [] : JSON.parse(storeChoseCoupons);//获取已选择的优惠券数组
      thiz.loadPage();
      let query = this.$route.query;
      let querys = query.money && query.rrmUnit && query.preferential_rate;
      thiz.orderTotalMoney = querys ? Number(query.money) : 0;
      thiz.rrmUnit = querys ? query.rrmUnit : 'CNY';
      thiz.maxDeduction = querys ? thiz.accMul(query.preferential_rate , thiz.orderTotalMoney ) : 0;
    },
    methods:{
      checkChange( $e , curCoupon , index){
        let isChecked = $e.target ? $e.target.checked : true;
        let thiz = this;
        let chose_arr = thiz.chose_arr;//已选择的数组
        if( isChecked ){
          chose_arr.push(curCoupon);
        }
        for( let i = chose_arr.length-1 ; i >= 0; i--){
          let item = chose_arr[i];
          if( curCoupon.id == item.id && !isChecked){
            chose_arr = thiz.arrRemove( chose_arr , i);
            break;
          }
        }
        thiz.chose_arr = chose_arr;
        thiz.getAllDis();
      },
      getAllDis(){
        //计算总抵扣
        let thiz = this;
        let disNum = 0; //抵扣金额
        let chose_arr = thiz.chose_arr;//已选择的数组
        thiz.chose_num = chose_arr.length; //已选择的数量
        let rrmUnit = thiz.rrmUnit; // CNY ,  USDT
        thiz.for( chose_arr , (item , index) => {
          disNum = thiz.accAdd( disNum , item.confMap[rrmUnit].dis );
        });
        thiz.deduction_money = disNum;
      },
      loadMore(){
        let thiz = this;
        thiz.toBottom( res => {
          if( thiz.acceptLoad ){
            thiz.loadPage()
          }
        });
      },
      reset(){
        this.list = [];
        this.notCoupon = false;
        this.showLoading = true;
        this.loadInfo = '加载中...';
        this.page = 0;
        this.totalPage = 1;
        this.acceptLoad = true;
        this.loadPage();
      },
      loadPage(){
        let thiz = this;
        if( !thiz.acceptLoad ){
          return;
        }
        let params = {
          currencyCode : 'CNY',
          page : thiz.page + 1,
          lens : 20,
          status : thiz.active + 1
        };
        getCouponList(params).then(res => {
          if(res.code == 200){
            let data = res.data;
            thiz.totalPage = data.totalPage;
            thiz.page = thiz.page + 1;
            let list = data.lists;
            thiz.for(  list , function (item , index ) {
              item.show = false;
            });
            list = thiz.list.concat(list);
            thiz.for( list , function (item , index) {
              item.checked = false;
              switch (thiz.rrmUnit) {
                case "CNY":
                  item.canUse = thiz.orderTotalMoney >= item.confMap.CNY.cond ? true : false;
                  break;
                case "USDT":
                  item.canUse = thiz.orderTotalMoney >= item.confMap.USDT.cond ? true : false;
                  break;
              }
            });
            let chose_arr = thiz.chose_arr;
            let chose_coupons_len = chose_arr.length;
            if( chose_coupons_len > 0){
              thiz.for(list , (item , index ) => {
                thiz.for(chose_arr , (item2 ,index2)=>{
                  if(item.id == item2.id ){
                    item.checked = true;
                  }
                });
              });
            }
            thiz.getAllDis();
            thiz.list = list;
            thiz.afterGetList();
            window.addEventListener('scroll',thiz.loadMore,true);
          }
        })
      },
      afterGetList(){
        let len = this.list.length;
        this.notCoupon = len === 0 ? true : false;
        this.showLoading = len === 0 ? false : true;
        if( this.page >= this.totalPage ){
          this.loadInfo = '到底了...';
          this.acceptLoad = false;
        } else {
          this.loadInfo = '到底加载更多...';
          this.acceptLoad = true;
        }
      },
      openItemRule( index ){
        let list = this.list;
        this.for( list , function (item , curindex ) {
          if( index === curindex ){
            item.show = !item.show;
          }else{
            item.show = false;
          }
        });
        this.list = list;
      },
      couponsAddToStore(){
        // chose_coupons
        let thiz = this;
        let chose_arr = thiz.chose_arr;
        this.$store.commit('chose_coupons' , chose_arr);
        this.$router.go(-1);
      },
      subUse(){
        let thiz = this;
        if( thiz.deduction_money > thiz.maxDeduction ){
          let dialogConfirm = '<p class="overhidden" style="font-size: 0.28rem">' +
            '<span class="floatleft">最多可抵扣:</span><span></span>' +
            '<span style="color: #F67311" class="floatright">'+thiz.maxDeduction+'' + ''+thiz.rrmUnit+'</span>'+
            '</p>'+
            '<p class="overhidden" style="font-size: 0.28rem;padding-top: 0.21rem">' +
            '<span class="floatleft">共选择优惠券：</span><span></span>' +
            '<span style="color: #F67311;" class="floatright">'+thiz.deduction_money+'' + ''+thiz.rrmUnit+'</span>'+
            '</p>';
          ;
          this.$refs.refb.changeContent(dialogConfirm);
          this.$refs.refb.dialogShow();
        }else{
          thiz.couponsAddToStore();
        }
      },
      confirm(){
        let thiz = this;
        thiz.couponsAddToStore();
      }
    },
    beforeDestroy() {
      let thiz = this;
      window.removeEventListener('scroll', thiz.loadMore , true);
    },
  }
</script>
<style type="text/less" lang='less' scoped>
  #views{
    padding-top: 0.3rem;padding-bottom: 1.6rem;
  }
  .listBox{
    padding: 0.78rem 0.3rem 0 0.3rem;padding-top: 0;
    >li{
      margin-top: 0.2rem;position: relative;
      >div{
        >input{
          opacity: 0;width: 100%;height: 100%;position: absolute;z-index: 1;left: 0;top: 0;
        }
        >input:hover{
          cursor: pointer;
        }
        >input:disabled:hover{
          cursor: default;
        }
        >label{
          height: 1.72rem;background: #fff;padding: 0.36rem 0.25rem;padding-bottom: 0;padding-left: 0.7rem;display: block;position: relative;
          .left{
            >.name{
              font-size: 0.3rem;
              >.expiringSoon{
                height: 0.32rem;margin-left: 0.05rem;
              }
            }
            >.endTime{
              color: #999;font-size: 0.22rem;padding-top: 0.12rem;
            }
          }
          .right{
            color: #F67311;text-align: right;
            >.money{
              font-size: 0;
              .num{
                font-size: 0.4rem;
              }
              .unit{
                font-size: 0.24rem;
              }
            }
            .canUse{
              font-size: 0.22rem;padding-top: 0.1rem;
            }
            .canUse2{
              color: #999;padding-top: 0.14rem;font-size: 0.2rem;
            }
          }
        }
        >label:before{
          width: 0.36rem;height: 0.36rem;border-radius: 50%;border:0.01rem solid#D2D2D2;position: absolute;content: '';display: block;
          left: 0.17rem;top: 0.46rem;
        }
        >input:checked+label:before{
          width: 0.36rem;height: 0.36rem;border-radius: 50%;border:0;position: absolute;content: '';display: block;
          left: 0.17rem;top: 0.46rem;background: url("../../common/imgs/blackradio.png") center center no-repeat;background-size: 100% 100%;
        }
      }
    }
    >li:first-child{
      margin-top: 0rem;
    }
    >.canNotUse{
      >div{
        .notCanuse{
          position: absolute;z-index: 1;left: 50%;top:50%;width: 0.94rem;height: 0.94rem;margin-top: -0.47rem;margin-left: -0.17rem;
        }
        > label:before{
          display: none;
        }
        input:checked + label:before{
          display: none;
        }
        >label{
          padding-left: 0.25rem;
        }
        > label .left > .name ,
        > label .left > .endTime ,
        > label .right .canUse ,
        > label .right > .money ,
        > label .right .canUse2{
          color: #D4D2D3;
        }
      }
    }
  }
  .loadInfo{
    text-align: center;font-size: 0.24rem;line-height: 0.35rem;color: #9B9B9B;padding: 0.3rem 0;
  }
  .notCoupon{
    text-align: center;padding-top: 2rem;
    .img{
      font-size: 0;
      img{
        width: 2.08rem;
      }
    }
    .msg{
      color: #898989;font-size: 0.3rem;padding: 0.3rem 0;
    }
  }
  .ab{
    position: fixed;z-index: 1;left: 0;bottom: 0;width: 100%;
    .max{
      background: #FDFAEE;height: 0.6rem;line-height: 0.6rem;text-align: center;color: #D5A428;font-size: 0.24rem;
    }
    .confirmUse{
      height: 1rem;background: #fff;padding-left: 0.3rem;color: #999999;font-size: 0.22rem;
      .btn{
        height: 100%;text-align: center;background: #FDD94B;font-size: 0.26rem;width: 2rem;float: right;
      }
      >span{
        line-height: 1rem;
      }
      .total{
        color: #F67311;font-size: 0.24rem;
        >span{
          font-size: 0.32rem;
        }
      }
    }
  }
  @media screen and (min-width: 1025px) {
    .ab{
      width: 600px;left: 50%;margin-left: -300px;
    }
  }
</style>
